<template>
    <div class="bg" :style="'background-image: url(' + pic +');'"></div>
    <div class="playmusic" >
        <img :src="img1" class="img1" v-show="!showgeci" @click="haveGeci">
        <img :src="img2" class="img2" v-show="!showgeci">
        <img :src="pic" class="picin" v-show="!showgeci">
        <div class="showGeci" v-show="showgeci" ref="showGeci" @click="haveGeci">
            <p :class="{active:(currentTime*1000>=item.pre&&currentTime*1000<item.time)}" v-for="(item,i) in geci" :key="i">{{item.lyric}}</p>
        </div>
        <div class="arrow">
            <i class="iconfont icon-arrow-left" style="font-size:0.6rem;" @click="goHome"></i>
            <div>
                <p style="font-size: 0.28rem;font-weight: bold;">{{name}}</p>
                <p style="text-align: center;">{{writer}}</p>  
            </div>
            <i class="iconfont icon-fenxiang" style="font-size:0.4rem;"></i>
        </div>
        <div class="bottom1">
            <i class="iconfont icon-aixin"></i>
            <i class="iconfont icon-xiazai"></i>
            <i class="iconfont icon-yinlemusic170"></i>
            <i class="iconfont icon-pinglun"></i>
            <i class="iconfont icon-more"></i>
        </div>
        <div class="line"></div>
        <div class="bottom2">
            <i class="iconfont icon-suijibofang"></i>
            <i class="iconfont icon-zuojiantou"></i>
            <i class="iconfont icon-bofang2" style="font-size: 0.9rem;" v-show="!play" @click="playSong"></i>
            <i class="iconfont icon-zanting" v-show="play" @click="playSong" style="font-size:0.9rem;"></i>
            <i class="iconfont icon-sanjiaoright"></i>
            <i class="iconfont icon-MENU_FOLD"></i>
        </div> 
        <audio :src="'https://music.163.com/song/media/outer/url?id='+index+'.mp3'"></audio>
    </div>
</template>

<script>
import {reactive,toRefs,onMounted,watch} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios'
import Img1 from '@/assets/pm_img1.png'
import Img2 from '@/assets/pm_img2.png'

export default{
   setup(){
       const state=reactive({
           index:1901371647,
           img1:Img1,
           img2:Img2,
           pic:"https://p1.music.126.net/aG5zqxkBRfLiV7A8W0iwgA==/109951166702962263.jpg",
           name:"孤勇者",
           writer:"陈奕迅",
           geci:[],
           showgeci:false,
           currentTime:'',
           play:false
        })
        watch(state.curretTime,(newValue)=>{
                console.log(newValue)
                console.log([this.$refs.showGeci])
                let p = document.querySelector('p.active')
                if(p){
                    let offsetTop = p.offsetTop;
                    this.$refs.showGeci.scrollTop = p.offsetTop;
                    console.log([p])
                }
        })
        onMounted(()=>{
               let audio=document.getElementsByTagName('audio')
            //    console.log(audio[0])
               audio[0].pause();
        })
       const route=useRoute()
       state.index=route.query.index;
       state.pic=route.query.pic;
       state.name=route.query.name;
       state.writer=route.query.writer;
        const router=useRouter();
        const goHome=()=>{
            router.go(-1);
        }
        const haveGeci=async()=>{
            if(!state.showgeci){
                let res=await axios.get('http://localhost:3000/lyric?id='+state.index).then(res=>res.data.lrc.lyric);
                    let arr = res.split(/\n/igs).map((item,i,arr)=>{
                    let min = parseInt(item.slice(1,3)) ;
                    let sec = parseInt(item.slice(4,6)) ;
                    let mill = parseInt(item.slice(7,10));
                
                    return {
                        min,sec,mill,
                        lyric:item.slice(12,item.length),
                        content:item,
                        time:mill+sec*1000+min*60*1000
                    }
                })
                arr.forEach((item,i)=>{
                    if(i==0) item.pre = 0;
                    else item.pre = arr[i-1].time
                })
                console.log(arr)
                state.geci=arr;
                state.showgeci=true;
            }else{
                state.showgeci=false;
            }
            
        }
        const playSong=()=>{
            let audio=document.getElementsByTagName('audio')
            console.log(audio[0])
                console.log(audio[0].paused)
                if (audio[0].paused) {
                    audio[0].play()
                    state.play = true
                    // store.state.id = setInterval(()=>{
                    //     store.commit('setCurrentTime',audio[0].currentTime)
                    // },1000)
                } else {
                    audio[0].pause()
                    state.play = false
                    // clearInterval(store.state.id)
                }
         }
       return{
           ...toRefs(state),
           goHome,haveGeci,playSong
       }
   }
}
</script>

<style scoped>
*{
    color: white;
}
.bg{
    /* position:fixed; */
    width: 7.5rem;
    height: 13.34rem;
    filter: blur(60px);
    z-index: -1;
}
.playmusic{
    width: 7.5rem;
    height: 13.34rem;
}
.img1{
    width: 5.4rem;
    height: 5.4rem;
    position: absolute;
    left: 1.12rem;
    top: 3.6rem;
    z-index: 1;
}
.img2{
    width:2.5rem;
    height: 3.1rem;
    transform: rotate(-10deg);
    position: absolute;
    left: 3.6rem;
    top: 1.1rem;
}
.picin{
    width:3.7rem;
    height: 3.8rem;
    border-radius: 3.8rem;
    position: absolute;
    left: 2rem;
    top: 4.3rem;
    z-index: 0;
}
.arrow{
  position: absolute;
  top: 0rem;
  height: 1.1rem;
  width: 7.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.2rem;
}
.bottom1{
    width:6rem;
    position: absolute;
    left: 0.8rem;
    top: 10.6rem;
    display: flex;
    justify-content: space-between;
    color: white;
}
.bottom1 i{
    font-size:0.52rem;
}
.bottom2{
    width:6rem;
    position: absolute;
    left: 0.8rem;
    top: 12rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}
.bottom2 i{
    font-size:0.52rem;
}
.line{
  width: 6.4rem;
  height: 0.03rem;
  background-color: white;
  position: absolute;
  left: 0.6rem;
  top: 11.35rem;
}
.showGeci{
    width: 7.5rem;
    text-align: center;
    height: 7rem;
    position: absolute;
    top: 2rem;
    overflow: scroll;
}
.showGeci p{
    color: rgba(255,255,255,0.6);
    font-size: 0.3rem;
    font-weight: bold;
    padding: 0.12rem 0;
}
</style>